<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>数据检测</title>
    <script type="text/javascript" src="../js/vue.js"></script>
</head>

<body>
    <div id="root">
        <h2>学生信息</h2>
        <button @click="student.age++">年龄+1</button> 
        <button @click="addSex"> 添加性别属性，默认值男</button> 
        <button @click="updateSex">修改性别</button> 
        <button @click="addFriendFirst">在列表首位添加一个朋友</button>
        <button @click="updateFirstFriendName">修改第一个朋友的名字为：张三</button> <br><br>
         <button @click="addHooby">添加一个爱好</button> 
         <button @click="updateFirstHooby">修改第一个爱好为开车</button>
         
         <h3>姓名：{{student.name}}</h3>
         <h3>年龄：{{student.age}}</h3>
         <h3 v-if="student.sex">性别：{{student.sex}}</h3>
         <h3>爱好：</h3>
         <ul>
            <li v-for="h in student.hobby">
                {{h}}
            </li>
         </ul>
         <h3>朋友们：</h3>
         <ul>
            <li v-for="(f,index) in student.friends" :key="index">
                  {{f.name}} - {{f.age}}
            </li>
         </ul>


    </div>
</body>
<script type="text/javascript">
   

    //基于计算属性实现 

    new Vue({
        el: '#root',
        data: {
            student :{
                name: 'tom',
                age: 18,
                hobby:['抽烟','喝酒','烫头'],
                friends:[
                    {name:'jeeny',age:18},
                    {name:'jim',age:19},
                    {name:'jack',age:21},
                ]
            }
        },
        methods: {
            addSex(){
           // Vue.set(this.student,'sex','男')
            this.$set(this.student,'sex','男')
            },
            updateSex(){
                this.student.sex ='女';
            },
            addFriendFirst(){
               // this.student.friends[0] = {name : 'kk',age: 20}; //这样直接赋值是不生效的 
                this.student.friends.unshift({name : 'kk',age: 20})
            },
            updateFirstFriendName(){
                this.student.friends[0].name ='张三'
            },
            addHooby(){
                this.student.hobby.push("唱歌") 
            },
            updateFirstHooby(){
            // this.student.hobby.splice(0,1,'开车') //0 代表第一个元素，1,删除一个元素,'替换内容'
            //Vue.set(this.student.hobby,0,'开车')
            this.$set(this.student.hobby,0,'开车')
            }

        }
       
    })
</script>

</html>